<template>
    <div class="page-box">
        <img src="@/assets/image/success.png" />
        
        <!-- // 原来的代码，根据isCheck状态判断显示 -->
        <template v-if="isCheck">
            <p>提交成功</p>
            <div class="tips">您的参观预约订单已成功提交审核，请在团体预约记录中查看审核进度，审核通过后视为预约成功。</div>
        </template>
        <p v-else>预约成功</p> 
        <div class="tips">您的参观预约已成功，可在团体预约记录中查看详情。</div>
    </div>
    <div class="page-bottom">
        <div class="button-group">
            <van-button type="default" @click="router.push('/flow')" size="large" round>继续预约</van-button>
            <div style="width:30px;"></div>
            <van-button type="primary" @click="router.push('/record')" size="large" round>查看记录</van-button>
        </div>
    </div>
</template>
<script setup lang="ts">
import router from '@/router';
/* 
// 原始代码
import { computed } from "vue";
import { useOrderStore } from '@/stores/order';

const isCheck = computed(() => {
    return useOrderStore().isCheck;
})
*/
</script>

<style lang="scss" scoped>
.page-box {

    img {
        width: 80%;
        margin: 0 auto
    }

    p {
        font-size: 20px;
        font-weight: 600;
        color: #333;
        text-align: center;
    }

    .tips {
        margin-top: 10px;
        padding: 0 10px;
        font-size: 14px;
        line-height: 24px;
        color: #333;
        text-indent: 28px;
    }
}

.page-bottom {
    width: 360px;
    margin: 0 auto;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20px;
    overflow: hidden;

    .button-group {
        display: flex;
        justify-content: center;
    }
}
</style>